<template>
  <DragBox v-if="isDebug" :init="{ x: 10, y: 50 }">
    <button @click="isStart = !isStart" class="btn btn-xs btn-warning">
      <span v-if="isStart" class="glyphicon glyphicon-record"></span>
      <span v-else class="glyphicon glyphicon-play"></span>
    </button>
  </DragBox>
</template>

<style scoped>
.details {
  max-height: 80%;
  background-color: white;
}
</style>

<script>
import DragBox from "./DragBox.vue";
import Debug from "../Debug";

/**
 * 点击开始记录日志,再次点击停止记录日志,并将记录的日志显示在新页面中
 */
export default {
  components: { DragBox },
  name: "Debug",
  data() {
    return {
      isDebug: true,
      isStart: false,
    };
  },
  watch: {
    isStart(val) {
      if (val) {
        Debug.startRecord();
        Debug.log("test");
      } else {
        Debug.stopRecord();
      }
    },
  },
};
</script>
